<template>
  <el-card class="box-card card-header m-t-20" id="photo-container">
    <div slot="header" class="clearfix f-medium">
      <i class="fa fa-photo m-r-10 text-c-blue" aria-hidden="true"></i>
      <span>拍摄图片</span>
      <span class="full-button" @click="openSFull" v-if="!isScreenfull"
        ><i class="fa fa-arrows-alt m-r-5" aria-hidden="true"></i>全屏</span
      >
      <span class="full-button" @click="closeSFull" v-else
        ><i class="fa fa-compress m-r-5" aria-hidden="true"></i>取消全屏</span
      >
    </div>
    <div class="flex-col-center photo-view" v-show="imgUrlList.length == 0">
      <img src="@/assets/icon/waitingSelect.svg" alt="" width="270" />
      <h3 class="f-w-400 text-c-gray">
        <i class="fa fa-mouse-pointer m-r-5" aria-hidden="true"></i
        >请选择一条记录的执行项
      </h3>
    </div>
    <div>
      <el-row
        :gutter="20"
        class="img-gallery"
        v-show="imgUrlList.length != 0"
        :style="isScreenfull ? 'min-height: 80vh;' : 'min-height: 400px;'"
      >
        <el-col
          :span="spanValue"
          v-for="(item, index) in imgUrlList"
          :key="index"
          class="img-item m-t-5"
        >
          <el-image
            :src="item.url[0]"
            :preview-src-list="item.url"
            style="width: 100%; height: 100%"
            lazy
          >
          </el-image>
          <el-button
            type="success"
            size="mini"
            plain
            class="m-t-5"
            @click="showMarker(item.pos, index)"
            >显示坐标</el-button
          >
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
import screenfull from "screenfull/dist/screenfull";
import { mapGetters } from "vuex";

export default {
  name: "PhotoList",
  data() {
    return {
      isScreenfull: false,
      spanValue: 6,
    };
  },
  computed: {
    ...mapGetters("cruiseRecord", ["imgUrlList"]),
  },
  created() {
    // 监听事件
    window.addEventListener("resize", this.onresize);
    window.addEventListener("keydown", this.keydown);
  },
  beforeDestroy() {
    // 解绑
    window.removeEventListener("resize", this.onresize);
    window.removeEventListener("keydown", this.keydown);
  },
  methods: {
    openSFull() {
      const element = document.querySelector("#photo-container");
      if (screenfull.isEnabled) {
        screenfull.request(element); // 元素全屏
      } else {
        console.log("浏览器不支持全屏！");
      }
    },
    // 显示图片拍摄坐标
    showMarker(pos, index) {
      let data = { pos, index };
      this.$bus.$emit("toAddMarker", data);
    },
    // 取消全屏
    closeSFull() {
      const element = document.querySelector("#photo-container");
      screenfull.exit(element); // 退出全屏
    },
    // 全屏的监听事件
    onresize() {
      this.isScreenfull = screenfull.isFullscreen;
      // 根据全屏状态改变flex比例
      this.spanValue = this.isScreenfull ? 3 : 6;
      //
    },
    // 阻止F11默认事件：全屏放大
    // 在F11全屏放大情况下，screenfull.isFullscreen的判断会出错
    keydown(event) {
      if (event.keyCode === 122) {
        event.preventDefault();
        event.returnValue = false;
      }
    },
  },
};
</script>


<style scoped lang="less">
.full-button {
  float: right;
  transition: 0.3s;
  color: var(--gray);
  padding: 0px 5px;
  cursor: pointer;
  &:hover {
    background-color: #e6f6fe;
  }
}
.photo-view {
  min-height: 420px;
  background-color: #fff;
}
.img-gallery {
  overflow-y: scroll;
  max-height: 420px;
  img {
    width: 100%;
    height: 100%;
  }
  .img-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 5px;
    border: 1px solid transparent;

    &:hover {
      border: 1px solid #dddddd;
      background-color: #f2fbfe;
    }
  }
}
.card-header {
  /deep/ .el-card__header {
    border-left: 5px solid var(--blue);
  }
}
</style>